<template>
	<view class="">
		<u-navbar title="订单挂牌" bgColor="#c30d23" :titleStyle="titleStyle" safeAreaInsetTop placeholder>
			<view slot="left"></view>
		</u-navbar>
		<view class="list">
			<zb-table
				:show-header="true"
				:columns="column"
				:stripe="false"
				:fit="true"
				:cell-header-style="cellheaderStyle"
				sum-text="合计"
				:cell-style="cellStyle"
				@cellClick="rowClick"
				:border="true"
				:data="data">
			</zb-table>
		</view>
		
	</view>
</template>

<script>
import {orderUrl,goodsUrl} from '@/api/user.js'
import registerVue from '../login/register.vue'
export default {
	data() {
		return {
			column:[ // formatter 自己改的 
			  { name: 'goodscode', label: '商品名称/代码',isShowName:true,fixed:false,width:110,emptyString:'--' },
			  { name: 'bid', label: '买价',sorter:false,align:'right', },
			  { name: 'bidvolume', label: '买量',color:'green'},
			  { name: 'ask', label: '卖价' },
			  { name: 'askvolume', label: '卖量' },
			  { name: 'last', label: '当前价',sorter:true },
			  { name: 'province', label: '涨跌' },//
			  { name: 'city', label: '幅度' },//
			  { name: 'opened', label: '今开' },
			  { name: 'presettle', label: '昨结' },
			  { name: 'lowest', label: '最低' },
			  { name: 'highest', label: '最高' },
			  { name: 'zhangfu', label: '振幅' },//
			  { name: 'zhangtingjia', label: '涨停价' },//
			  { name: 'zhangtingjia', label: '跌停价' },//
			  // { name: 'operation', type:'operation',label: '操作',renders:[
			  //     {
			  //       name:'编辑',
			  //       func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
			  //     },
			  //     {
			  //       name:'删除',
			  //       type:'warn',
			  //       func:"dele"
			  //     },
			  //   ]},
					],
			 data:[],       
			titleStyle: {
				color: "#ffffff",
				fontSize: "36rpx",
				fontWeight: '400'
			},
			data1:[]
		}
	},
	onShow() {
		this.getgoodsUrl()
	},
	methods:{
		getgoodsUrl(){
			goodsUrl().then(res=>{
				// console.log(res);
				this.data1 = res.rows
				this.getorderUrl()
			})
		},
		cellheaderStyle(){
			return {
				color:"#999999"
			}
		},
		bijiao(row){
			
			if(row.bid>row.presettle){
				return {
					color:"#ff2b2b"
				}
			}else{
				return {
					color:"green"
				}
			}
		},
		formatter(row, column, rowIndex, columnIndex){
			// console.log(row, column, rowIndex, columnIndex)
			return true
			
		},
		cellStyle({row, column, rowIndex, columnIndex}){
			// console.log(row, column, rowIndex, columnIndex)
			if(column.name === 'goodscode'){
				return {
					color:"#999",
				}
			}
			if(column.name=="bid"){
				if(row.bid>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}else if(column.name=="ask"){
				if(row.ask>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}else if(column.name=="last"){
				if(row.last>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}else if(column.name=="opened"){
				if(row.opened>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}else if(column.name=="lowest"){
				if(row.lowest>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}else if(column.name=="highest"){
				if(row.highest>row.presettle){
					return {
						color:"#ff2b2b"
					}
				}else{
					return {
						color:"green"
					}
				}
			}
		},
		getorderUrl(){
			orderUrl({}).then(res=>{
				// console.log(res)
				let mergedArr = this.data1.map((item, index) => {
					// 检查 arr1 中是否有相应位置的对象
					if (this.data1[index]) {
						// 合并对象
						return { ...item, ...res.data[index] };
					} else {
						// 如果 arr1 中没有相应位置的对象，则保留 arr 中的对象
						return item;
					}
				});
				// console.log(mergedArr);
				// mergedArr.forEach(item => item.goodscode = item.goodsname+'&'+item.goodscode)
				this.data = mergedArr
			})
		},
		rowClick(e){
			console.log(e)
			uni.navigateTo({
				url:`/pages/order/echarts?name=${e.goodscode}/${e.goodsname}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.list{
		width: auto;
		overflow-y:auto;
	}
</style>